<template>
  <div class="login_box">
    <el-form
      class="login_form"
      :model="loginForm"
      :rules="loginFormRules"
      ref="loginFormRef"
    >
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          prefix-icon="el-icon-user-solid"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          prefix-icon="el-icon-lock"
          type="password"
          placeholder="请输入密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item class="button-group">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="resetLoginForm" class="reset-btn"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import axios from "axios";
import router from "../router";
import { ElMessage } from "element-plus";
function useResetLogin(loginFormRef) {
  const resetLoginForm = () => {
    loginFormRef.value.resetFields();
  };
  return {
    resetLoginForm,
  };
}
function useLogin(loginFormRef, state) {
  const login = () => {
    loginFormRef.value.validate((valid) => {
      if (!valid) return ElMessage.error("验证未通过");
      const params = {
        username: state.loginForm.username,
        password: state.loginForm.password,
      };
      axios.post("/login", params).then((res) => {
        if (res.status == 200) {
          ElMessage.success("登录成功");
          window.sessionStorage.setItem("token", "JWT " + res.data.token);
          router.push("/");
        } else {
          ElMessage.error("登录失败");
        }
      });
    });
  };
  return {
    login,
  };
}
export default {
  setup() {
    const loginFormRef = ref();
    const state = reactive({
      loginForm: {
        username: "",
        password: "",
      },
    });
    const loginFormRules = {
      username: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 5, max: 15, message: "用户名的长度在5-15个字符之间" },
      ],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 15, message: "密码的长度在6-15个字符之间" },
      ],
    };
    return {
      ...toRefs(state),
      loginFormRules,
      loginFormRef,
      ...useResetLogin(loginFormRef),
      ...useLogin(loginFormRef, state),
    };
  },
};
</script>

<style>
.login_box {
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  margin: 200px auto;
}
.login_form {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}
.button-group .el-form-item__content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.reset-btn {
  margin-left: auto;
}
</style>